<template>
  <n-grid cols="1" responsive="screen" class="-mt-5">
    <n-grid-item>
      <n-spin size="small" :show="jumping">
        <n-list>
          <n-list-item>
            <template #prefix>
              <n-icon size="40" color="#4365EE">
                <LogoAlipay />
              </n-icon>
            </template>
            <template #suffix>
              <n-button type="primary" text v-if="!relate.alipayRelate" @click="relateAlipay"
                >绑定</n-button
              >
              <n-button type="primary" text v-else="relate.alipayRelate" @click="unRelateAalipay"
                >解绑</n-button
              >
            </template>
            <n-thing title="支付宝">
              <template #description>
                <span class="text-gray-400" v-if="relate.alipayRelate"
                  >已绑定支付宝账号:{{ relate.alipayUserName }}</span
                >
                <span class="text-gray-400" v-else>当前账号未绑定支付宝</span>
              </template>
            </n-thing>
          </n-list-item>
          <n-list-item>
            <template #prefix>
              <n-icon size="40" color="#52c41a">
                <LogoWechat />
              </n-icon>
            </template>
            <template #suffix>
              <n-button type="primary" text v-if="!relate.wechatRelate">绑定</n-button>
              <n-button type="primary" text v-else="relate.wechatRelate">解绑</n-button>
            </template>
            <n-thing title="微信">
              <template #description>
                <span class="text-gray-400" v-if="relate.wechatRelate"
                  >已绑定微信账号:{{ relate.wechatUserName }}</span
                >
                <span class="text-gray-400" v-else>当前账号未绑定微信</span>
              </template>
            </n-thing>
          </n-list-item>
          <n-list-item>
            <template #prefix>
              <n-icon size="40" color="#EE9943">
                <WeiboCircleOutlined />
              </n-icon>
            </template>
            <template #suffix>
              <n-button type="primary" text v-if="!relate.weboRelate">绑定</n-button>
              <n-button type="primary" text v-else="relate.weboRelate">解绑</n-button>
            </template>
            <n-thing title="微博">
              <template #description>
                <span class="text-gray-400" v-if="relate.weboRelate"
                  >已绑定微博账号:{{ relate.weiboUserName }}</span
                >
                <span class="text-gray-400" v-else>当前账号未绑定微博账号</span>
              </template>
            </n-thing>
          </n-list-item>
          <n-list-item>
            <template #prefix>
              <n-icon size="40" color="#EE9943">
                <svg
                  t="1634026098340"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1772"
                  width="200"
                  height="200"
                >
                  <path
                    d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m259.168-568.896h-290.752a25.28 25.28 0 0 0-25.28 25.28l-0.032 63.232c0 13.952 11.296 25.28 25.28 25.28h177.024a25.28 25.28 0 0 1 25.28 25.28v12.64a75.84 75.84 0 0 1-75.84 75.84h-240.224a25.28 25.28 0 0 1-25.28-25.28v-240.192a75.84 75.84 0 0 1 75.84-75.84h353.92a25.28 25.28 0 0 0 25.28-25.28l0.064-63.2a25.312 25.312 0 0 0-25.28-25.312H417.184a189.632 189.632 0 0 0-189.632 189.6v353.952c0 13.952 11.328 25.28 25.28 25.28h372.928a170.656 170.656 0 0 0 170.656-170.656v-145.376a25.28 25.28 0 0 0-25.28-25.28z"
                    p-id="1773"
                    fill="#d81e06"
                  />
                </svg>
              </n-icon>
            </template>
            <template #suffix>
              <n-button type="primary" text v-if="!relate.giteeRelate">绑定</n-button>
              <n-button type="primary" text v-else="relate.giteeRelate">解绑</n-button>
            </template>
            <n-thing title="码云">
              <template #description>
                <span class="text-gray-400" v-if="relate.giteeRelate"
                  >已绑定码云账号:{{ relate.giteeUserName }}</span
                >
                <span class="text-gray-400" v-else>当前账号未绑定码云账号</span>
              </template>
            </n-thing>
          </n-list-item>
        </n-list>
      </n-spin>
    </n-grid-item>
  </n-grid>
</template>
<script lang="ts" setup>
  import { LogoAlipay, LogoWechat } from '@vicons/ionicons5';
  import { WeiboCircleOutlined } from '@vicons/antd';
  import { ref, onMounted } from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
  import { useUserStore } from '@/store/modules/user';
  import { getRelateList } from '@/api/system/social';
  import { alipayLogin, unRelateSocial } from '@/api/system/social';
  const userStore = useUserStore();
  const message = useMessage();
  const dialog = useDialog();
  const relate = ref({});
  const jumping = ref(false);
  const initRelate = () => {
    let username = userStore.info.username;
    getRelateList(username).then((data) => {
      relate.value = data;
    });
  };
  const relateAlipay = () => {
    jumping.value = true;
    alipayLogin().then((res) => {
      location.href = res;
      jumping.value = false;
    });
  };
  const unRelateAalipay = (id) => {
    dialog.warning({
      title: '警告',
      content: '你确定要解绑支付宝账号吗？',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: () => {
        jumping.value = true;
        unRelateSocial(relate.value.alipayId).then((res) => {
          message.success('解绑成功');
          jumping.value = false;
          initRelate();
        });
      },
      onNegativeClick: () => {},
    });
  };
  onMounted(() => {
    initRelate();
  });
</script>
